<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商店管理系统</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="../网页图片/jq.js"></script>
    <style>
        a,
        ul,
        li {
            list-style: none;
            text-decoration: none;
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 600px;
            height: 400px;
            margin: 100px auto;
            position:relative;
            overflow: hidden;
            background-repeat:inherit;
            z-index: -1;
        }

        .navs {
            width: 4200px;
            height: 100%;
            position: absolute;
            top: 0;
            left: -600px;
            /* border: 1px solid red; */
        }

        .navs li {
            width: 600px;
            height: 100%;
            float: left;
        }

        .navs li img {
            width: 100%;
            height: 100%;
        }

        #bots {
            display: inline-block;
            width: 600px;
            height: 40px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        #bots li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #cccccc;
            position: relative;
            left: 220px;
            top: 10px;
            margin-left: 10px;
            float: left;
        }

        #bots .active {
            background: red;
        }
/*  对于顶部列表进行修饰
*/
.topbutton{
list-style-type: none;
  margin: 0;
  padding: 5px 5px 5px 5px;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
.top{
    float:left;
}
.top a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.top  a:hover {
  background-color: #111;
}
.toplist .fa{
    margin-right: 10px;
}

.innerblock{
    display:none;
}
 .toplist  li:hover .innerblock {
    display: block;
    position:fixed;
    background:#333;
  
   
} 
.top a:hover .innerblock ul{
    display: block;
    margin: 10px;
} 
.goTop{
    width: 100px;
    height: 30px;
    background-color: white;
    color: #333;
    text-align: center;
    padding-top: 5px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    display: none;
    outline-color:rgb(143, 140, 140);
    border: 1px solid rgb(134, 131, 138);
    border-radius: 10px;
   
}
.goTop:hover{
    background-color: rgb(211, 207, 207);
    color: #333;
}
.search-box{
    position: fixed;
    top: 4%;
    left:60%;
    transform: translate(-50%,-50%);
    background:#333;
    height: 30px;
    border-radius: 10px;
    padding:10px;
    width: fit-content;
}
.search-btn{
    color: rgb(133, 122, 122);
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}
.search-box:hover>.search-txt{
    width: 240px;
    padding: 0 6px;

}
.search-box:hover>.search-btn{
    background: white;

}
.search-txt{
    border:none;
    background: none;
    float: left;
    padding: 0;
    color: white;
    font-size: 16px;
    line-height: 30px;
    width:0px ;
}
.myImg{
width: 150px;
height: 150px;
border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
.mtImg:hover{
    opacity: 0.7;
}

.goods{
    border: #ccc 1px solid;
    width: 500px;
    height: 150px;
    margin-top: 10px;
    float:left;
    margin-right: 200px;
    margin-left: 20px;
}
.goods:hover{
    box-shadow:2px 5px 2px #333;
}
div.detail{
 
margin-left: 40%;
margin-top: -25%;
padding-left: 20px;
text-align: left;
text-indent: 50px;
font-size: 32px;
height: 50px;
word-wrap: break-word;
color: gold;
background-color: white;
} 
div.detail2{
 margin-left: 40%;
margin-top: 10px;
padding-left: 0px;
text-align: left;
text-indent: 50px;
font-size: 15px;
height: 30px;
word-wrap: break-word;


}
div.detail3{
    margin-left: 40%;
color: #777;
padding-right: 5px;
text-align: right;
text-indent: 50px;
font-size: 12px;
height: 30px;
word-wrap: break-word;


}
.sortlist{
    background-color: #b1acac;
    width: 50px;
    height: 100px;
    margin-left: 96%;
    position:fixed;
    margin-top: -200px;
}
.sheng_li{
    width: 50px;
    height: 50px;
 
}
.jiang_li{
    width: 50px;
    height: 50px;
}
.tooltiptext{
    visibility: hidden;
    width:120px;
    background-color: #333;
    color: white;
    text-align: center;
   border-radius: 6px;
  padding: 5px 0;
  z-index: 1;
  position:absolute;
  margin-left: -180px;
  margin-top: 5px;
}
.sheng:hover .tooltiptext{
    visibility: visible;

}
.jiang:hover .tooltiptext{
    visibility: visible;

}
    </style>

</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="toplist">
        <ul class="topbutton" >
            <li class="top">
                <a href="./shop.php" ><i class="fa fa-shopping-cart" ></i>全部商品</a>
                <div class="innerblock">
                    <ul>
                        <li><a href="./shop.php?category=女装/女鞋"><i class="fa fa-chevron-right"></i>女装/女鞋</a></li>
                        <li><a href="./shop.php?category=男装/男鞋"><i class="fa fa-chevron-right"></i>男装/男鞋</a></li>
                        <li><a href="./shop.php?category=护肤彩妆"><i class="fa fa-chevron-right"></i>护肤彩妆</a></li>
                        <li><a href="./shop.php?category=运动户外"><i class="fa fa-chevron-right"></i>运动户外</a></li>
                        <li><a href="./shop.php?category=家电数码"><i class="fa fa-chevron-right"></i>家电数码</a></li>
                        <li><a href="./shop.php?category=母婴童装"><i class="fa fa-chevron-right"></i>母婴童装</a></li>
                        <li><a href="./shop.php?category=手表配饰"><i class="fa fa-chevron-right"></i>手表配饰</a></li>
                        <li><a href="./shop.php?category=居家用品"><i class="fa fa-chevron-right"></i>居家用品</a></li>
                        <li><a href="./shop.php?category=小小生活"><i class="fa fa-chevron-right"></i>小小生活</a></li>
                        <li><a href="./shop.php?category=医药健康"><i class="fa fa-chevron-right"></i>医药健康</a></li>

                    </ul>
                </div>
            </li>
            <li class="top ">
                <a  href=""><i class="fa fa-edit" ></i>货物修改</a>    
                <div class="innerblock">
                    <ul>
                        <li><a href="./stock.php"target="_blank"><i class="fa fa-chevron-right"></i>库存修改</a></li>
                        <li><a href="./counter.php" target="_blank"><i class="fa fa-chevron-right"></i>柜存修改</a></li>
                        <li><a href="./sell.php" target="_blank"><i class="fa fa-chevron-right"></i>销售修改</a></li>
                    </ul>
                </div>
            </li>
            <li class="top">
                <a  href="#contact"><i class="fa fa-search" ></i>数据查询</a>
                <div class="innerblock">
                    <ul>
                        <li><a href="./stuff.php" target="_blank"><i class="fa fa-chevron-right"></i>员工查询</a></li>
                        <li><a href="./user.php" target="_blank"><i class="fa fa-chevron-right"></i>用户管理</a></li>
            
                    </ul>
                </div>
            </li>
            <li class="top">
                <a href="./report.php"><i class="fa fa-user" ></i>报表查看</a>
               
            </li>
            <li class="top">
                <a  href="admin_detail.php" target="_top" ><i class="fa fa-user-o" ></i>个人信息</a>
            </li>
            <li class="top">
                <a  href="logout.php" target="view_window" ><i class="fa fa-sign-out" ></i>退出系统</a>
            </li>
          </ul>
    </div>
<!-- 搜索框 -->
<form action="../shop.php" method="GET" name="form">

<div class="search-box">
    <input type="hidden" name="category" value=<?php echo $category; ?>>
    <input class="search-txt" type="text" name="Name" placeholder="搜索...">
<a class="search-btn" href="javascript:document.form.submit();" ><i class="fa fa-search" ></i></a>
</div>
</form>

<!-- 图片滚动 -->
    <div class="wrap" id="box">
        <ul id='navs' class="navs">
            <li><a href="javascript:;"><img src="/网页图片/封面.jpg" /></a></li>
            <li><a href="javascript:;"><img src="/网页图片/number1.jpg" /></a></li>
            <li><a href="javascript:;"><img src="/网页图片/number2.jpg" /></a></li>
            <li><a href="javascript:;"><img src="/网页图片/number3.jpg" /></a></li>
            <li><a href="javascript:;"><img src="/网页图片/封面3.jpg" /></a></li>
            <li><a href="javascript:;"><img src="/网页图片/封面.jpg" /></a></li>
            <li><a href="javascript:;"><img src="/网页图片/number1.jpg" /></a></li>
        </ul>
        <ul id="bots">
            <li class="bot active"></li>
            <li class="bot"></li>
            <li class="bot"></li>
            <li class="bot"></li>
            <li class="bot"></li>
        </ul>
    </div>
<!-- 图片的排版 -->
<?php foreach($result as $k => $res):?>
<div class="goods">
    
    <a target="_top" href=<?php echo "'{$res[9]}' ";?>>

    <?php echo "<img src='{$res[9]}' class='myImg'>";?>
</a>


<div class="detail"><i class="fa fa-jpy"></i><?php echo $res[2];?></div>
<div class="detail2"><?php echo $res[1];?></div>
<div class="detail3">编号：<?php echo $res[0];?></div>

</div> 
<?php endforeach;?>

<!-- 返回顶部按钮 -->
    <div class="goTop"><a href="#"><i class="fa fa-hand-o-up"></i>返回顶部</a></div>

    <!-- 价格排序 -->
<div class="sortlist">
   <form action="./shop.php" method="GET">
    <input type="hidden" name='Name' value=<?php echo $name;?>>
    <input type="hidden" name="category" value=<?php echo $category;?>>
    <input type="hidden" name="order" value=1>
    <div class="sheng"><button class="sheng_li"><i class="fa fa-chevron-up fa-2x" ></i></button>
        
        <span class="tooltiptext">价格升序</span>
    </div>
</form>
   <form action="./shop.php" method="GET">
    <input type="hidden" name='Name' value=<?php echo $name;?>>
    <input type="hidden" name="category" value=<?php echo $category;?>>
    <input type="hidden" name="order" value=0>
    <div class="jiang"><button class="jiang_li"><i class="fa fa-chevron-down fa-2x" ></i></button>
        <span class="tooltiptext" onclick="formSubmit()">价格降序</span>
    </div>
</form>
</div>

    <script>
        //图片滚动的实现
        let num = 1;
        let i = 0;
        let timer = null;
        swiper();
        // 把定时器功能做一个函数封装
        function swiper() {
            timer = setInterval(() => {
                // 1、图片功能
                num++;
                // 设置条件 当num大于6，num=2
                if (num > 6) {
                    // num = 6的时候，其实显示  ban1  
                    // 应该通过样式赋值的形式，直接变为 真正的 ban1
                    $("#navs").css('left', -600)
                    num = 2;
                }
                $("#navs").animate({ left: -num * 600 }, 500);

                // 2.小圆点功能
                i++;
                if (i > 4) {
                    i = 0;
                }
                $("#bots li").eq(i).addClass('active').siblings().removeClass('active');

            }, 2000);
        }



        // 鼠标移入 清除定时器
        $(".wrap").mouseover(() => {
            clearInterval(timer);
        });

        // 鼠标移出 开启定时器
        $(".wrap").mouseout(() => {
            swiper();
        });
        //返回顶部功能
        let goTop = document.getElementsByClassName('goTop')[0];
        window.onscroll = function(){
            let res = document.body.scrollTop || document.documentElement.scrollTop;
            // console.log(res);
            if(res >=400){
                goTop.style.display = 'block';
            }else{
                goTop.style.display = 'none';
            }
        }
        goTop.onclick = function(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }  
        var modal = document.getElementById('myModal');
    </script>
    
</body>
</html>